import { Component, ReactNode } from "react";

export default function Mytolist() {
  return (
    <>
      <div>
        <MyForm></MyForm>
      </div>
    </>
  );
}

class MyForm extends Component {
  state = {
    list: ["吃饭", "睡觉"],
    value: "",
  };
  btnClick = () => {
    this.setState({
      list: [this.state.value, ...this.state.list],
      value: "",
    });
  };
  deleteItem = (index: number) => {
    this.state.list.splice(index, 1);
    this.setState({
      // list: [...this.state.list],
    });
  };
  render(): ReactNode {
    return (
      <>
        <h1>表单</h1>
        <form action="/api/toAddList" onSubmit={(e) => e.preventDefault()}>
          <input
            type="text"
            placeholder="请输入将要做的事件"
            value={this.state.value}
            onChange={(e) => {
              this.setState({ value: e.target.value });
            }}
          />
          <input style={{marginLeft:"10px"}}
            type="submit"
            value="添加"
            onClick={() => {
              this.btnClick();
            }}
          />
        </form>
        <hr />
        <div>
          <p>要做的事有</p>
          <ul>
            {this.state.list.map((item, index) => {
              return (
                <li
                  style={{
                    marginBottom: "10px",
                    width: "200px",
                    display: "flex",
                    justifyContent: "space-between",
                  }}
                  key={index}
                >
                  {item}{" "}
                  <button
                    className="delete"
                    onClick={() => {
                      this.deleteItem(index);
                    }}
                    style={{ boxSizing:"border-box", marginLeft: "10px" }}
                  >
                    删除
                  </button>
                </li>
              );
            })}
          </ul>
        </div>
      </>
    );
  }
}
